<template>
  <div id="app">
    <div class="chart">
      <div id="trenddata" :style="{ width: '1300px', height: '500px' }"></div>
    </div>
  </div>
</template>

<script>
let echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/line");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/legend");

import "echarts/lib/component/grid";
import { GridComponent } from "echarts/components";
echarts.use([GridComponent]);

export default {
  data() {
    return {};
  },
  mounted() {
    this.chart();
  },
  methods: {
    chart() {
      let chart = echarts.init(document.getElementById("trenddata"));

      chart.setOption({
        tooltip: {
          trigger: "axis",
        },
        legend: {
          x: "500px",
          y: "480px",
          data: [
            {
              name: "positive",
              textStyle: { color: "rgb(255,255,255)" },
            },
            {
              name: "negative",
              textStyle: { color: "rgb(255,255,255)" },
            },
            { name: "neutral", textStyle: { color: "rgb(255,255,255)" } },
            { name: "mixed", textStyle: { color: "rgb(255,255,255)" } },
          ],
        },
        xAxis: { data: [] },
        yAxis: {},
        series: [
          {
            name: "positive",
            data: [],
            type: "line",
            smooth: true,
            areaStyle: {
              // 区域渐变色和折现渐变色在areaStyle中设置
              normal: {
                // 右下左上
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 1,
                    color: "blue",
                  },
                  {
                    offset: 0,
                    color: "rgba(1,132,255,0)",
                  },
                ]),
              },
            },
          },
          {
            name: "negative",
            data: [],
            type: "line",
            smooth: true,
            areaStyle: {
              // 区域渐变色和折现渐变色在areaStyle中设置
              normal: {
                // 右下左上
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 1,
                    color: "green",
                  },
                  {
                    offset: 0,
                    color: "rgba(1,132,255,0)",
                  },
                ]),
              },
            },
          },
          {
            data: [],
            type: "line",
            name: "neutral",
            smooth: true,
            areaStyle: {
              // 区域渐变色和折现渐变色在areaStyle中设置
              normal: {
                // 右下左上
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 1,
                    color: "yellow",
                  },
                  {
                    offset: 0,
                    color: "rgba(1,132,255,0)",
                  },
                ]),
              },
            },
          },
          {
            data: [],
            type: "line",
            name: "mixed",
            smooth: true,
            areaStyle: {
              // 区域渐变色和折现渐变色在areaStyle中设置
              normal: {
                // 右下左上
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 1,
                    color: "red",
                  },
                  {
                    offset: 0,
                    color: "rgba(1,132,255,0)",
                  },
                ]),
              },
            },
          },
        ],
      });

      let mydata = this;
      let getxAxis = [];
      let getSeries_p = [];
      let getSeries_n = [];
      let getSeries_m = [];
      let getSeries_mixed = [];

      mydata
        .$axios({
          method: "get",
          url: "http://116.62.228.138:10003/media/twitterTrendGet",
        })
        .then((res) => {
          res.data.data.map((item) => {
            getxAxis.push(item.date);
            getSeries_p.push(item.positive);
            getSeries_n.push(item.negative);
            getSeries_m.push(item.neutral);
            getSeries_mixed.push(item.mixed);
          });
          chart.setOption({
            xAxis: {
              data: getxAxis,
            },
            series: [
              {
                name: "positive",
                data: getSeries_p,
                type: "line",
              },
              {
                name: "negative",
                data: getSeries_n,
                type: "line",
              },
              {
                data: getSeries_m,
                type: "line",
                name: "neutral",
              },
              {
                data: getSeries_mixed,
                type: "line",
                name: "mixed",
              },
            ],
          });
        });
    },
  },
};
</script>

<style lang="less">
#app {
  font-family: Arial, "Avenir", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #353535;
  width: 100%;
  height: 100%;
  margin-top: 15px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 90%;
}

.image {
  width: 100%;
  height: 100%;
}
</style>
